import { createApp } from 'vue'
import { createPinia } from 'pinia'

// pinia状态持久化插件
import piniaPersist from 'pinia-plugin-persist'

// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css';
import './assets/style/element/css-vars.css'

// 引入element-plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 引入自定义插件
import { FYLoadingPlugin } from "./utils/LoadingManager";

// 自定义组件
import AppLink from './components/base/AppLink.vue'
import FyImg from './components/base/FyImg.vue'

// 引入markdown编辑器样式
import "md-editor-v3/lib/preview.css";

// 引入指令
import vCopy from "./directives/copy";
import vImage from "./directives/imgplaceholder";

// 引入组件、路由
import App from './App.vue'
import router from './router'

// animate
import "animate.css";

// tailwind.css  https://www.tailwindcss.cn/docs
import "./assets/style/tailwind.css";

// 引入全局样式
import './assets/style/main.scss'

// 引入mock文件，正式发布时，注释掉该处即可
import './mock'

const app = createApp(App)

app.use(ElementPlus)

app.use(FYLoadingPlugin);

const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)

app.use(router)

// 引入自定义指令
app.directive("copy", vCopy);
app.directive("image-load", vImage);

// 注册element-plus图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册自定义组件
app.component('AppLink', AppLink)
app.component('FyImg', FyImg)

app.mount('#app')
